<script setup lang="ts">

import PassengerStrokeCard from "~/components/driver/PassengerStrokeCard.vue";

const route = useRoute()
const id:string = route.params.id as string

const inviteList: Ref<StrokePO[]> = ref([])
let intervalId: any = null

async function getInviteList(intervalId: any): Promise<boolean> {
  return new Promise(((resolve) => {
        let isSuccess: boolean = false
        cFetch<StrokePO>('/stroke/api/invite/list/' + id, {
          auth: true,
          defaultOpts: {
            method: 'POST',
          }
        }).then(res => {
          inviteList.value = res.data
          isSuccess = true
        }).catch(err => {
          if (intervalId) clearInterval(intervalId)
          showFailToast('发生错误')
          console.log(err)
        }).finally(function () {
          resolve(isSuccess)
        })
      })
  )

}


onMounted(async function () {
  let isContinue = await getInviteList(null)
  if (!isContinue) return
  intervalId = setInterval(function () {
    getInviteList(intervalId)
  }, 3000)
})
onUnmounted(function () {
  if (intervalId) {
    clearInterval(intervalId)
  }
})

</script>

<template>
  <div class="header">
    <h2 style="color:RGB(218,165,32);margin: 12px 0;">邀请记录</h2>
    <p style="margin: 12px 0">您可以点击联系乘客，随时聊天沟通出行事宜</p>
  </div>

  <div class="content">
    <div v-for="item in inviteList" class="item">
      <PassengerStrokeCard
          :id="item.id"
          :inviter-id="id"
          :user-alias="item.useralias"
          :from="item.startAddr"
          :to="item.endAddr"
          :start-distance='item.startDistance'
          :end-distance='item.endDistance'
          :departure-time="new Date(item.departureTime)"
          :avatar="item.avatar"
          :suitability="null"
          :quick-confirm="item.quickConfirm"
          :status="item.status"
      >
        <template #default>
          <p v-if="item.status===3" style="color: #657081" class="status-text">
            已超时
          </p>
          <p v-else-if="item.status===2" style="color: #657081" class="status-text">
            已拒绝
          </p>
          <p v-else-if="item.status===1" style="color: green" class="status-text">
            已确认
          </p>
          <p v-else-if="item.status===0" style="color: #3939f4" class="status-text">
            未确认
          </p>

        </template>
      </PassengerStrokeCard>
    </div>

  </div>

</template>

<style scoped>
.header {
  background-color: RGB(227, 231, 224);
  padding: 15px;
  position: relative;
  margin-top: 4%;
  border-radius: 10px;
  border: 1px grey solid;
}

.content {
  background-color: RGB(227, 231, 224);
  padding: 15px;
  position: relative;
  margin: 4% 0;
  border-radius: 10px;
  border: 1px grey outset;
  width: 85%;
}

.item {
  border-left: 4px solid #aeaeae;
  margin-bottom: 25px;
  padding-left: 8px;
}

.item:last-child {
  margin-bottom: 0;
}

.status-text {
  margin: 10px;
  text-align: right;
  position: relative;
}
</style>